<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏密码明文</title>
    <!-- <style>
        .box{
            width: 240px;
            height: 40px;
            background-color: white;
        }
        .box .box1{
            width: 35px;
            height: 35px;
            background-color:aqua;
            float: right;
            margin: auto;
        }
    </style> -->
</head>
<body>
    <div class="box">
        <input type="password" id="passwordInput" >
    <img src="img1.jpg" style='width: 26px;height: 26px;position: relative; top: 10px;'id="eyeImage"
    onclick="toggleVisibility()" >
    </div>
    <script>
        function toggleVisibility(){
            let input = document.getElementById("passwordInput");
            let inmage = document.getElementById("eyeImage");
        
            if(input.type==='password'){
               input.type ='text';
                image.scr='img1.jpg';
            }else{
               input.type='password';
                image.scr='img2.jpg';
            }
        }
    
    </script>
</body>
</html>